<template>
  <div class="content">
    <div class="header">
    <div style="width:20px;height:10px;"></div>
    <div>  <el-button type="primary" @click.native="setAddSection"><i class="el-icon-plus"></i>新建部门</el-button>
     <el-button type="primary" @click.native="edit_click"><i class="el-icon-edit"></i>编辑部门</el-button>
      <el-button type="danger" @click.native="deldoor"><i class="el-icon-delete"></i>删除部门</el-button>
    </div>
   
  </div>
  <div class="flex">
   <div class="left1">
     <div class="leftwarp">
       <el-tree :data="Door_list" v-if="Door_list.length>0" node-key='id'  @check-change="getNode" ref="tree"  :props="defaultProps"  :highlight-current="true" :default-expand-all="true"   @node-click="handleNodeClick"></el-tree>
     </div>
   </div>
   <div class="right">
     <div class="he1">
       <p>当前部门</p>
       <p class="name">{{texts.join('/')}}</p>
     </div>
     <div class="table">
           <el-table
           :default-sort = "{prop: 'date', order: 'descending'}"
    :data="tableData"
    border
     :cell-style="$rowstyle"
        :header-cell-style="$headerstyle"
    style="width: 100%">
    
   
    <el-table-column
    align="center"
      prop="year"
      label="年度"
     >
    </el-table-column>
    <el-table-column
    align="center"
      prop="num"
      label="指标（万元）"
>
    </el-table-column>
    
    
   
    <el-table-column
    align="center"
      label="编辑"
      width="203">
      <template slot-scope="scope">
        <!-- <el-button type="primary" icon="el-icon-edit" @click="handleClick(scope.row)" ></el-button> -->
        <el-button type="danger" icon="el-icon-delete" @click="handldel(scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
     </div>
     <div class="botom"> <el-button type="text" @click.native="settargetstatus">新建指标</el-button></div>
   </div>
  </div>
  <div class="prop" v-if="AddSectionstatus">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop">
        <div class="propheader">
          新建部门
          <el-button class="close1" type="text" @click="setAddSection">关闭</el-button>
        </div>
        <div class="bm_item">
          <div class="bm_name">部门名称</div>
          <el-input style="width:60%;" v-model="AddSection.name"></el-input>
        </div>
        <div class="bm_item">
          <div class="bm_name">部门等级</div>
           <el-cascader
           style="width:60%;"
    :options="Door_list"
    :props="props"
    v-model="value_bm"
    clearable></el-cascader>
        </div>
         <div class="bm_item">
          <div class="bm_name">年度</div>
          <el-date-picker
            v-model="AddSection.year"
            style="width:60%;"
            type="year"
            placeholder="选择年">
          </el-date-picker>
        </div>
         <div class="bm_item">
          <div class="bm_name">指标(万元)</div>
          <el-input style="width:60%;" type="number" v-model="AddSection.num"></el-input>
        </div>
        

        
        <div class="lc_item lc_itemnon lc_itemnon1">
          <el-button type="primary" @click.native="add_bm">添加</el-button>
          <el-button type="primary" @click.native="setAddSection">取消</el-button>
        </div>
      </div>
    </div>
     <div class="prop" v-if="targetstatus">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="height:250px;">
        <div class="propheader">
          新建指标
          <el-button class="close1" type="text" @click.native="settargetstatus">关闭</el-button>
        </div>
        
         <div class="bm_item">
          <div class="bm_name">年度</div>
          <el-date-picker
            v-model="targetparam.year"
            style="width:60%;"
            type="year"
            placeholder="选择年">
          </el-date-picker>
        </div>
         <div class="bm_item">
          <div class="bm_name">指标(万元)</div>
          <el-input style="width:60%;" type="number" v-model="targetparam.num"></el-input>
        </div>
        

        
        <div class="lc_item lc_itemnon lc_itemnon1">
          <el-button type="primary" @click.native="addtaget">添加</el-button>
          <el-button type="primary" @click.native="settargetstatus">取消</el-button>
        </div>
      </div>
    </div>
    <div class="prop" v-if="editstatus">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="height:250px;">
        <div class="propheader">
          编辑部门
          <el-button class="close1" type="text" @click.native="seteditstatus" >关闭</el-button>
        </div>
        <div class="bm_item">
          <div class="bm_name">部门名称</div>
          <el-input style="width:60%;" v-model="edit.name"></el-input>
        </div>
        <div class="bm_item">
          <div class="bm_name">部门等级</div>
           <el-cascader
           style="width:60%;"
    :options="Door_list"
    :props="props"
    v-model="editValue"
    clearable></el-cascader>
        </div>
         
        
        

        
        <div class="lc_item lc_itemnon lc_itemnon1">
          <el-button type="primary" @click.native="editsave">保存</el-button>
          <el-button type="primary" @click.native="seteditstatus">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getDoorList,getSdoorlist,addtargetlist,adddoor,editdoor} from '../../api/System.js'
export default {
  name: 'DirectivePermission',

  data() {
    return {
      AddSectionstatus:false,
      props:{
      children: 'children',
          label: 'name',
          value:'id',
          checkStrictly: true
      },
      AddSection:{
        name:'',
        pid:'0',
        year:'',
        num:'',
      },
      edit:{
       name:'',
       pid:''
      },
      value_bm:'',
      //部门id
      sectionID:'',
         tableData: [],
        Door_list:[],
      //新建指标
      targetparam:{
        year:'',
        num:''
      },
          defaultProps: {
          children: 'children',
          label: 'name'
        },
        treeKey:'', //初始化
      ids:[],
      texts:[],
      keys:[],
      targetstatus:false,
      //编辑时部门等级显示
      editValue:[],
      iteminfo:{},
      editstatus:false,
    }
     
  },
  created() {
    this.doorlist()
  },
  methods: {
    //删除部门
    deldoor(){

    },
    //点击编辑部门
    edit_click(){
    if(! this.sectionID){
      this.$message({
        message:'请选择部门',
        type:'warning'
      })
      return
    }
    
    //修改时传上一级id  将部门id数组去掉现在部门id
    var len=this.editValue.length-2
    var arr=this.keys.pop()
    this.editValue=this.keys

    console.log(this.editValue)
    // return
    this.edit.name=this.iteminfo.name
    // this.edit.name=this.infoitem.name
    this.seteditstatus()
    },
    editsave(){
    console.log(this.editValue)
    if(!this.edit.name){
      this.$message({
        message:'用户名不能为空'
      })
      return
    }
    if(this.editValue.length>0){
      var len=this.editValue.length

      this.edit.pid=this.editValue[len-1]
    }else{
      this.edit.pid='0'
    }
    console.log(this.edit)
// return
// console.log({id:this.sectionID,param:this.edit})
// return
   editdoor({id:this.sectionID,param:this.edit}).then(res=>{
     console.log(res)
     if(res.code==200){
        this.$message({
          message:'修改成功',
          type:'success'
        })
        // this.$router.go(0)
        this.sectionID=''
        
        this.ids=[]
        this.texts=[]
        this.tableData=[]
        this.Door_list=[]
        this.doorlist()
        this.seteditstatus()
     }
   })
    },
    seteditstatus(){
this.editstatus=!this.editstatus
    },
    //添加部门弹框
    setAddSection(){
      if(this.AddSectionstatus){
        this.AddSection.name=''
        this.AddSection.pid='0'
        this.AddSection.year=''
        this.AddSection.num=''
        this.value_bm=''
      }
    this.AddSectionstatus=!this.AddSectionstatus
    },
    //添加部门保存
    add_bm(){
    console.log(this.value_bm)
    if(!this.AddSection.name){
      this.$message({
        message:'部门名称不能为空',
        type:'warning'
      })
      return
    }
    if(!this.AddSection.year){
      if(this.AddSection.num){
        this.$message({
        message:'请选择年份',
        type:'warning'
      })
      return
      }
    }
    if(this.AddSection.year){
      if(!this.AddSection.num){
        this.$message({
        message:'指标不能为空',
        type:'warning'
      })
      return
      }
    }
    if(this.value_bm.length>0){
      var len =this.value_bm.length
      var id=this.value_bm[len-1]
      this.AddSection.pid=id
    }else{
      this.AddSection.pid='0'
    }
    var param={...this.AddSection}
    if(this.AddSection.year){
      param.year=new Date(this.AddSection.year).getFullYear()
    }
    console.log(param)
    adddoor(param).then(res=>{
      if(res.code==200){
        console.log(res)
        this.$message({
          message:'添加成功',
          type:'success'
        })
        // this.$router.go(0)
        this.sectionID=''
        
        this.ids=[]
        this.texts=[]
        this.tableData=[]
        this.Door_list=[]
        this.doorlist()
        this.setAddSection()
      }
    })
    },
  //添加弹窗状态
  settargetstatus(){
    if(this.targetstatus){
      this.targetparam.year=''
      this.targetparam.num=''
    }
    if(!this.targetstatus){
      if(!this.sectionID){
        this.$message({
          message:'请选择部门',
          type:'warning'
        })
        return
      }
    }
  this.targetstatus=!this.targetstatus
  },
//添加指标
   addtaget(){
     if(!this.targetparam.year){
this.$message({
          message:'年份不能为空',
          type:'warning'
        })
        return
     }
     if(!this.targetparam.num){
this.$message({
          message:'指标不能为空',
          type:'warning'
        })
        return
     }
     var time=new Date(this.targetparam.year).getFullYear()
     console.log(time)
     var data={...this.targetparam}
     data.year=time
    console.log(this.targetparam)
    addtargetlist({id:this.sectionID,param:data}).then(res=>{
      if(res.code==200){
        this.$message({
          message:'添加成功',
          type:'success'
        })
        this.gettarget(this.sectionID)
        this.settargetstatus()
      }
    })
   },
    //获取指标列表
    gettarget(id){
    getSdoorlist({id:id}).then(res=>{
      console.log(res)
      if(res.code==200){
       this.tableData=res.data
      }else{
        this.tableData=[]
      }
    })
    },
    //获取部门列表
    doorlist(){
   getDoorList().then(res=>{
     console.log(res)
     if(res.code==200){
       this.Door_list=res.data
     }
   })
    },
    updateKeyChildren(a,b){
    console.log(a)
    console.log(b)
    },
    getNode(e){
     console.log(e)
    },
     handleNodeClick(data,node,c) {
    //  console.log(node)
      //  return
      // console.log(data)
      console.log("xxxbbbbb")
      // console.log(this.getHalfCheckedNodes)
      this.iteminfo=data
      // console.log(this.iteminfo)
      this.texts=[]
      this.ids=[]
      this.keys=[]
      this.sectionID=data.id
      // console.log(e.id)
       this.gettarget(this.sectionID)
      this.setnodetext(node.key)
     
      },
    setnodetext(key){
      console.log(key)
      var keys =key
      // key = key-1
       var tree=this.$refs.tree
     var id=tree.getNode(keys).data.id
     this.ids.unshift(id)
     console.log(this.ids)
  
     var text=tree.getNode(keys).data.name
     console.log("data")
     this.texts.unshift(text)
        console.log(this.texts)
     //该节点的key
     var modekey=tree.getNode(keys).key
     this.keys.unshift(modekey)
    //  return
     if(tree.getNode(keys).parent.id){
        console.log("data1")
       this.setnodetext(tree.getNode(keys).parent.key)
     }else{
       console.log(this.texts)
       console.log(this.keys)
     }
    
    },  
    
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  /deep/ .permission-alert {
    width: 320px;
    margin-top: 15px;
    background-color: #f0f9eb;
    color: #67c23a;
    padding: 8px 16px;
    border-radius: 4px;
    display: inline-block;
  }
  /deep/ .permission-sourceCode {
    margin-left: 15px;
  }
  /deep/ .permission-tag {
    background-color: #ecf5ff;
  }
}
.content{
  display: flex;
  flex-direction: column;
  height: calc(100vh - 84px);
}
  .header{
    height: 40px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
  }
  .Search{
    display: flex;
    align-items: center;
    margin-left: 30px;
  }
  .flex{
    flex: 1;
    // background: red;
    display: flex;
  }
  .left1{
    width: 40%;
    height: 100%;
  }
  .right{
    flex: 1;
    // background: blueviolet;
  }
  .leftwarp{
    width: 90%;
    margin: 0 auto;
    margin-top: 30px;
  }
  .he1{
    display: flex;
    width: 95%;
    margin: 0 auto;
  }
  .name{
    color: rgb(0, 102, 255);
    margin-left: 10px;
  }
  .table{
    width: 90%;
    margin: 0 auto;
  }
  .adds{
 color: rgb(0, 102, 255);
  }
  .botom{
    width: 90%;
    margin: 0 auto;
    text-align: right;
  }
  .prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}
.warpprop {
  width: 400px;
  height: 350px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
}
.bm_item{
  width: 90%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  .bm_name{
    width: 25%;
    font-size: 14px;
  }
}
.lc_item{
  width: 90px;
  margin: 0 auto;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

